<template>
    <div class="mobile-page" :style="{width:magicWidth+'%',margin:slider+'px auto 0'}">
        <!--  :style="{,padding:paddingTop+'px '+paddingHorizon+'px '+paddingBottom+'px',backgroundImage:'url('++')',backgroundSize:backgroundSize,backgroundRepeat:'no-repeat',backgroundPosition:'center'}" -->
        <img class="flex_img" :src="bgImg"/>
        <div class="flex_magic" :style="{left:paddingLeft+'%',right:paddingRight+'%',top:paddingTop+'%',bottom:flexSize!='initial'?paddingBottom+'%':'auto'}">
            <img class="flex_img" :src="flexImg" v-if="flexImg" :style="{objectFit:flexSize,position:flexSize!='initial'?'absolute':'relative',height:flexSize!='initial'?'100%':'auto'}">
            <div class="fullbox">
                <div class="rows" v-for="(rItem,ridx) in urlList">
                    <div class="cols" v-for="(cItem,cidx) in rItem">
                        <Input v-model="urlList[ridx][cidx]" class="link"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'home_flex',
        cname: 'Flex布局',
        icon: 'iconhuodongmofang',
        configName: 'c_home_flex',
        type:2,// 0 基础组件 1 营销组件 2工具组件
        defaultName:'flexBox', // 外面匹配名称
        props: {
            index: {
                type: null
            },
            num: {
                type: null
            }
        },
        computed: {
            ...mapState('admin/mobildConfig', ['defaultArray'])
        },
        watch: {
            pageData: {
                handler (nVal, oVal) {
                    this.setConfig(nVal)
                },
                deep: true
            },
            num: {
                handler (nVal, oVal) {
                    let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
                    this.setConfig(data)
                },
                deep: true
            },
            'defaultArray': {
                handler (nVal, oVal) {
                    let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
                    this.setConfig(data);
                },
                deep: true
            }
        },
        data () {
            return {
                // 默认初始化数据禁止修改
                defaultConfig: {
                    name:'flexBox',
                    timestamp: this.num,
                    // 页面间距
                    mbConfig: {
                        title: '页面间距',
                        val: 0,
                        min: -50
                    },
                    imgConfig: {
                        title: '背景图',
                        img: ''
                    },
                    // 左右边距
                    leftConfig: {
                        title: '左间距(%)',
                        val: 0,
                        min: 0
                    },
                    rightConfig: {
                        title: '右间距(%)',
                        val: 0,
                        min: 0
                    },
                    // 上下边距
                    topConfig: {
                        title: '上间距(%)',
                        val: 0,
                        min: 0
                    },
                    bottomConfig: {
                        title: '下间距(%)',
                        val: 0,
                        min: 0
                    },
                    bgConfig: {
                        title: 'Flex背景图',
                        img: '',
                        size:'cover'
                    },
                    wdConfig: {
                        title: '宽度(%)',
                        val: 100,
                        min: 0
                    },
                    flexConfig:{
                        title:'矩阵行列数',
                        img:'',
                        urlList:[['']]
                    }
                },
                /*vuexMenu: '',
                txtColor: '',
                boxStyle: '',*/
                slider: '',
                paddingTop:'', //上间距
                paddingBottom:'', //下间距
                paddingLeft:'',//左间距
                paddingRight:'',//右间距
                flexImg:'', //flex背景图
                flexSize:'',  //flex背景图填充方式
                magicWidth:'',//魔方宽度
                bgImg:'',//大背景图片，
                urlList:[],
                pageData: {}
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
                this.setConfig(this.pageData)
            })
        },
        methods: {
            setConfig (data) {
                if(!data) return
                /*this.vuexMenu = data.menuConfig.list
                this.txtColor = data.titleColor.color[0].item;
                this.boxStyle = data.rowStyle.type;*/
                this.slider = data.mbConfig.val;
                this.paddingLeft = data.leftConfig.val;
                this.paddingRight = data.rightConfig.val;
                this.paddingTop = data.topConfig.val;
                this.paddingBottom = data.bottomConfig.val;
                this.magicWidth = data.wdConfig.val;
                this.bgImg = data.imgConfig.img;
                this.flexImg = data.bgConfig.img;
                this.flexSize = data.bgConfig.size;
                this.urlList = data.flexConfig.urlList;
            }
        }
    }
</script>

<style scoped lang="stylus">
.mobile-page
  position relative
  min-height 80px
.flex_img
    position relative
    display block
    width 100%
.flex_magic
    position absolute
    background-color #cccccc8a
    .flex_img
       left 0
       top 0
       width 100%
    .fullbox
      display flex
      overflow hidden
      flex-direction column
      .rows
        flex 1
        display flex
        flex-direction row
        .cols
         flex 1
         border 1px dashed #f00
.link
   width 96%
   height 100%
   align-items center
   display flex
   margin 0 auto 0
.link >>> .ivu-input
        background-color #00000075
        color #fff
</style>
